<template>
<page>
  <div style="postion:relative;flex:1">
    <div class="pageConte">
      <scroller class="scroller">
        <div class="imgDemo">
          <!-- 商品主图轮播 -->
          <div class="swiper-box">
            <slider class="slider" interval="3000" auto-play="true" v-if="goodInfo.thumb_url">
              <div class="frame" v-for="(item,index) in goodInfo.thumb_url.split(',')" :key="index">
                <image class="itemImg" :src="item" resize="cover" />
              </div>
              <indicator class="indicators1"></indicator>
            </slider>
          </div>
          <!--价格 收藏  -->
          <div class="info-box goods_top">
            <div class="top_left">
              <text class="priceSymbol">AU$</text>
              <text class="goods-info-price">{{goodInfo.price}}</text>
              <text
                class="goods-old_price"
                v-if="goodInfo.old_price!=='0.00'"
              >{{goodInfo.old_price}}</text>
              <!-- <text class="goods_cul">Pinkage</text> -->
            </div>
            <div class="collections" @click="keep">
              <text class="iconfont isKeep" v-if="goodInfo.is_collection==1">&#xe60f;</text>
              <text class="iconfont collecIcon" v-else>&#xe634;</text>
              <!-- <text>Adding Collections</text> -->
            </div>
          </div>
          <!-- 标题  -->
          <text class="goods-info-title">{{goodInfo.title}}</text>
          <!-- 邮费 -->
          <!-- <div class="delivery">
            <text class="de_title">Delivery Fee</text>
            <text class="de_cont">AU${{goodInfo.postage}}</text>
          </div>-->
          <!-- 商品规格 -->
          <div
            class="delivery mt20 h100"
            v-if="goodInfo.param&&goodInfo.param.length>0"
            @click="changeAlert('parmarAlert','show')"
          >
            <text class="de_title">Specification</text>
            <text class="de_cont">{{goodInfo.param[0].title}} {{goodInfo.param[0].description}} ...</text>
          </div>
          <div class="mb10">
            <!-- 商品详情 -->
            <div class="goods_info" v-if="isWebs">
              <!-- {{isweb}} -->
              <text class="info_title">Description</text>
              <div class="innerHtml" v-html="goodInfo.content"></div>
            </div>
            <div class="userInfo" v-else>
              <div class="usertTop" @click="seeGoodsDetail(goodInfo.content)">
                <text class="Reviews">Description</text>
                <div class="userRight">
                  <text class="iconfont strollIcon">&#xe6a1;</text>
                </div>
              </div>
            </div>
          </div>
          <!-- 评价-->
          <div class="userInfo mb150">
            <div class="usertTop">
              <text class="Reviews">Reviews</text>
              <div class="userRight">
                <text class="stroll" v-if="reviewList.nickname">All</text>
                <text class="stroll" v-if="!reviewList.nickname">NO Reviews</text>
                <text class="iconfont strollIcon">&#xe6a1;</text>
              </div>
            </div>
            <div class="userCenter" v-if="reviewList.nickname">
              <div class="row userMsg">
                <image class="userAvator" :src="reviewList.headimgurl" />
                <text class="userName">{{reviewList.nickname}}</text>
              </div>
              <div class="row">
                <text class="row_title">{{reviewList.message}}</text>
              </div>
            </div>
          </div>
        </div>
      </scroller>
      <!-- 底部菜单 -->
      <div class="footer">
        <div class="foot_icons">
          <div class="iconsbox bright" @click="toChat">
            <text class="iconfont textIcon">&#xe605;</text>
            <text class="boxtext">service</text>
          </div>
          <div class="iconsbox boxright" @click="toCart">
            <text class="iconfont textIcon">&#xe64c;</text>
            <text class="boxtext">Cart</text>
            <text class="cardNumBox" v-if="cardNum">{{cardNum}}</text>
          </div>
        </div>
        <div class="btnBox">
          <text class="buy" @click="clickOption(goodId,'1')">Add to cart</text>
          <text class="joinCart" @click="clickOption(goodId,'2')">Buy</text>
        </div>
      </div>
      <div :class="[showMask?'maskAlert':'hidemask']" @click="changeAlert(alertType,'hide')"></div>
      <!-- 购买弹出框 -->
      <div class="shopAlert" ref="shopAlert" @click="e=>e.stopPropagation()">
        <div class="alertTop">
          <image class="goodsImg" :src="goodInfo.thumb" />
          <div class="goodsTit">
            <div class="rowPrice">
              <text class="symbol">AU$</text>
              <text class="price">{{goodInfo.price}}</text>
            </div>
            <text class="intro">{{goodInfo.title}}</text>
            <text class="iconfont alertClose" @click="changeAlert(alertType,'hide')">&#xe608;</text>
          </div>
        </div>
        <scroller class="alertScroll">
          <div class="styleBox" v-for="(item,index) in goodInfo.spec" :key="index">
            <text class="styleTitle">{{item.title}}</text>
            <div class="itemBox">
              <text
                class="styleItem"
                v-for="(itemSpe,index) in item.content"
                :key="index"
                :class="[itemSpe.id==selectSpec[index]?'styleActive':'']"
                @click="selectSp(index,itemSpe.id)"
              >{{itemSpe.name}}</text>
            </div>
          </div>
          <div class="price-number">
            <text class="num-title">purchase quantity</text>
            <div class="gnumber">
              <div class="numaction" @click="sub()">
                <text class="iconfont numIcon">&#xe630;</text>
              </div>
              <div class="numinputbox" @click="discard">
                <input class="numinput" type="number" v-model="number" @input="sum" />
              </div>
              <div class="numaction" @click="add()">
                <text class="iconfont numIcon">&#xe601;</text>
              </div>
            </div>
          </div>
        </scroller>
        <text class="sureBtn" @click="confirm">Confirm</text>
      </div>
      <!--  规格弹窗 -->
      <div class="parmarAlert" ref="parmarAlert" @click="e=>e.stopPropagation()">
        <div class="alertTops">
          <text class="iconfont alertCloses" @click="changeAlert(alertType,'hide')">&#xe608;</text>
          <text class="titleC">Specification</text>
        </div>
        <scroller class="alertScroll">
          <div class="parmarList" v-for="(item,index) in  goodInfo.param" :key="index">
            <text class="parmarTit">{{item.title}}</text>
            <text class="parmarCon">{{item.description}}</text>
          </div>
        </scroller>
        <text class="sureBtn" @click="changeAlert(alertType,'hide')">close</text>
      </div>
      <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
        <floading class="indicators" color="#303030"></floading>
      </div>
      <!-- 购买--加入购物车弹出框 -->
      <optionsSe
        ref="refOption"
        :goods_type="optType"
        :goodInfo="goodInfo"
        :addressId="addressData.id"
        :shopSpec="shopSpec"
        :option="goodInfo.option"
        :noOption="noOption"
      />
    </div>
    <div class="headTop">
      <head bgcolor="transparent" titleColor="#303030">
        <div class="rightBox" v-if="!isWebs" slot="right" @click="shareGoods">
          <img class="sahreImg" src="root:img/share.png" alt />
        </div>
      </head>
    </div>
  </div>
</page>
</template>

<script>
const navbar = weex.requireModule("navbar");
const keepChange = new BroadcastChannel("keepChange");
const AddCart = new BroadcastChannel("AddCart");
import Html from "../../component/html.vue";
import optionsSe from "../../component/options2.vue";

import {
  get_goodsInfo,
  get_goods_spec,
  get_order_num,
  get_goods_option,
  get_evaluation_list,
  add_goods_collection,
  del_goods_collection,
  add_order_info,
  get_address_list,
  get_orderConfirm
} from "../../mixin/ajax.js";
import Utils from "../../mixin/utils";

import asCore from "../../mixin/core";
export default {
  components: { Html, optionsSe },
  data() {
    return {
      optType: "1",
      alertType: "",
      goodId: "",
      userId: "",
      showWay: "",
      isWebs: false,
      selectSpec: [],
      option_id: "", //规格属性ID
      shopSpec: [],
      noOption: false,
      reviewList: {
        headimgurl: "",
        nickname: "",
        message: "阿萨德2"
      }, //评价
      addressData: {},
      //是否显示遮罩层
      showMask: false,
      number: 1,
      //轮播图下标
      currentSwiper: 0,
      anchorlist: [], //导航条锚点
      selectAnchor: 0, //选中锚点
      serviceClass: "", //服务弹窗css类，控制开关动画
      specClass: "", //规格弹窗css类，控制开关动画
      shareClass: "", //分享弹窗css类，控制开关动画
      cardNum: "",
      // 商品信息
      goodInfo: {
        spec: [],
        option: []
      },
      //商品描述html
      descriptionStr: ""
    };
  },

  mounted() {
    this.isWebs = this.isWeb;
  },
  created() {
    AddCart.onmessage = () => {
      this.getCardNum();
    };
  },
  methods: {
    onLoad(param) {
      if (param && param.param) {
        return false;
      }
      if (param && param.id) {
        this.goodId = param.id;
      }
      let that = this;
      var pref = weex.requireModule("storage");
      pref.getItem("defaultAddress", event => {
        if (event.result == "success") {
          that.addressData = JSON.parse(event.data);
        }
      });
      //  pref.setItem("defaultAddress", JSON.stringify(address));
      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getGoodInfo();

        if (userId) {
          this.getCardNum();
          get_evaluation_list(
            {
              users_id: this.userId,
              goods_id: this.goodId,
              page: "1",
              page_num: "10"
            },
            (res, flag) => {
              if (flag) {
                if (res.code == 200 && res.data.list.length > 0) {
                  this.reviewList = res.data.list[0];
                }
              }
            }
          );

          get_address_list(
            {
              users_id: userId,
              page: 1,
              page_num: 10
            },
            (res, flag) => {
              if (flag) {
                if (res.code == 200) {
                  if (res.data.list.length > 0) {
                    this.addressData = res.data.list[0];
                  }
                }
              }
            }
          );
        }
      });
    },
    clickOption(id, type) {
      let noeDate = new Date().getTime();
      let startDate = new Date(
        this.goodInfo.start_time.replace(/-/g, "/")
      ).getTime();
      let endtDate = new Date(
        this.goodInfo.end_time.replace(/-/g, "/")
      ).getTime();
      if (noeDate < startDate) {
        this.alert("Please wait, the event is about to start.");
        return false;
      } else if (noeDate > endtDate) {
        this.alert("Sorry, the event has finished.");
        return false;
      }
      let that = this;
      // if (!this.addressData.id) {
      //   this.push("root:app/user/address/address.js", {
      //     type: "shop"
      //   });
      //   return false;
      // }
      this.optType = type;
      that.$refs.refOption.initPage(id, this.goodInfo.title);
    },

    getCardNum() {
      if (this.userId) {
        get_order_num({ users_id: this.userId, goods_type: 1 }, (res, flag) => {
          if (flag && res.code == 200) {
            this.cardNum = res.data.number;
          }
        });
      }
    },
    seeGoodsDetail(str) {
      let that = this;
      var storage = weex.requireModule("storage");
      storage.setItem("goodsDestr", str, () => {
        that.push("root:app/goods/goodsWeb.js", { title: that.goodInfo.title });
      });
    },

    confirm() {
      if (this.showWay == "cart") {
        this.addToCart();
      } else {
        this.toPay();
      }
    },
    toPay() {
      let data = [
        {
          option_id: this.option_id,
          number: this.number,
          postage: this.goodInfo.postage,
          goods_id: this.goodId,
          goodsId: this.goodInfo.id,
          thumb: this.goodInfo.thumb,
          price: this.goodInfo.price,
          title: this.goodInfo.title,
          total_price: this.goodInfo.total_price,
          goods_type: this.goodInfo.goods_type
        }
      ];
      this.push("root:app/order/confirm.js", {
        data: JSON.stringify(data)
      });
    },
    // 加入购物车
    addToCart() {
      add_order_info(
        {
          users_id: this.userId,
          goods_id: this.goodId,
          option_id: "",
          address_id: this.addressData.id,
          number: 1
        },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
          }
        }
      );

      // this.toast("加入购物车");
    },
    selectSp(index, value) {
      this.selectSpec.splice(index, 1, value);
    },
    getGoodInfo() {
      let that = this;
      get_goodsInfo(
        {
          users_id: this.userId,
          id: this.goodId
        },
        (res, flag) => {
          if (flag) {
            if (res.code == "200") {
              this.goodInfo = Object.assign({}, this.goodInfo, res.data);
              if (this.goodInfo.spec.length == 0) {
                this.noOption = true;
              }
            }
          }
        }
      );
    },
    // 客服
    toChat() {
      this.push("root:app/msg/chat.js");
    },
    add() {
      if (this.number < 2) {
        this.number++;
      }
    },
    sub() {
      if (this.number > 1) {
        this.number--;
      }
    },
    sum(e) {
      if (e.value > 0 && e.value < 2) {
        this.number = e.value;
      }
    },
    toCart() {
      this.push("root:app/main/cart.js", { hasback: true });
    },

    changeAlert(alertType, type, way) {
      this.alertType = alertType;
      var testEl = this.$refs[alertType];

      if (way) {
        this.showWay = way;
      }
      let transform = "100%";
      this.showMask = false;

      if (type == "show") {
        transform = "-100%";
        this.showMask = true;
      }
      const animation = weex.requireModule("animation");
      animation.transition(
        testEl,
        {
          styles: {
            transform: `translateY(${transform})`
          },
          duration: 400, //ms
          timingFunction: "ease",
          delay: 0 //ms
        },
        function() {}
      );
    },
    hideShare() {
      this.shareClass = "hide";
      setTimeout(() => {
        this.shareClass = "none";
      }, 150);
    },
    shareGoods() {
      let sys = weex.requireModule("sysShare");
      sys.share({
        type: "txt",
        content:
          "https://www.empirise.com/mall/public/web/h5/#/app/goods/goods.js?id=" +
          this.goodId
      });
    },
    //收藏
    keep() {
      if (!this.userId) {
        this.push("root:app/login/login.js");
        return false;
      }
      if (this.goodInfo.is_collection == 0) {
        add_goods_collection(
          {
            users_id: this.userId,
            goods_id: this.goodId
          },
          (res, flag) => {
            if (flag) {
              this.toast(res.message);
              if (res.code == 200) {
                this.$set(this.goodInfo, "is_collection", 1);
                // this.goodInfo.is_collection = 1;

                keepChange.postMessage("update");
              }
            }
          }
        );
      } else {
        del_goods_collection(
          {
            users_id: this.userId,
            goods_id: this.goodId
          },
          (res, flag) => {
            if (flag) {
              this.toast(res.message);
              if (res.code == 200) {
                this.$set(this.goodInfo, "is_collection", 0);
                // this.goodInfo.is_collection = 0;
                keepChange.postMessage("update");
              }
            }
          }
        );
      }
    }
  }
};
</script>

<style scoped>
.pageConte {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.iconfont {
  font-family: iconfont;
}
.headTop {
  position: absolute;
  top: 0;
  left: 0;
}

.scroller {
  flex: 1;
}

.row {
  flex-direction: row;
}

.imgDemo {
  background-color: #f2f2f2;
}

.swiper-box {
  position: relative;
  width: 750px;
  height: 800px;
  background-color: #f5f5f5;
}

.shopDeail {
  padding: 32px;
}

.slider {
  width: 750px;
  position: relative;
  height: 800px;
}

.frame {
  width: 750px;
  height: 800px;
}

.itemImg {
  width: 750px;
  height: 800px;
}
.indicators1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  item-color: #ddd;
  item-selected-color: #ba8833;
}
.indicators {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background-color: rgba(0, 0, 0, 0);
}
.goods_info {
  margin-top: 20px;
  background-color: #fff;
}

.info_title {
  font-size: 32px;
  padding: 10px 30px;
  color: #323232;
}
.innerHtml {
  font-size: 32px;
  padding: 10px 30px;
}

.good_detail {
  width: 750px;
  height: 1488px;
  margin-bottom: 100px;
}

.info-box {
  width: 750px;
  padding: 10px 20px;
  background-color: #fff;
  /* margin-bottom: 20px; */
}

.goods_top {
  flex-direction: row;
  justify-content: space-between;
  /* padding: 22px 32px; */
  /* margin-top: 20px; */
  padding-left: 32px;
}

.top_left {
  flex-direction: row;
  align-items: center;
}

.collections {
  justify-content: center;
  align-items: center;
  color: #999;
  width: 60px;
  height: 60px;
}

.collecIcon {
  font-size: 32px;
  color: #999;
}

.isKeep {
  font-size: 32px;
  color: #ea464f;
}

.colectip {
  font-size: 20px;
  color: #666;
}

.goods_cul {
  margin-left: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #bb8732;
  padding: 10px 20px;
  border-radius: 50px;
  color: #bb8732;
  height: 47px;
}

.priceSymbol {
  font-size: 22px;
  color: #ea464f;
  line-height: 22px;
  margin-right: 5px;
}

.goods-info-price {
  font-size: 38px;
  line-height: 38px;
  font-weight: 600;
  color: #ea464f;
  margin-right: 15px;
}

.goods-old_price {
  color: #ea464f;
  font-size: 24px;
  text-decoration: line-through;
}

.goods-info-title {
  font-size: 32px;
  padding: 0px 32px 20px;
  color: #000;
  background-color: #fff;
}

.delivery {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ede8e6;
  flex-direction: row;
  /* padding: 20px 0; */
  height: 80px;
  background-color: #fff;
  align-items: center;
}
.mb150 {
  margin-bottom: 150px;
}
.h100 {
  height: 100px;
  align-items: center;
}

.mt20 {
  margin-top: 20px;
}

.de_title {
  color: #9a9999;
  /* width: 200px; */

  padding-left: 32px;
  font-size: 28px;
  padding-right: 32px;
}

.de_cont {
  font-size: 32px;
  color: #1e1e1e;
  font-size: 28px;
  padding-left: 20px;
}

.userInfo {
  width: 750px;
  /* flex-direction: row; */
  /* padding: 20px 10px 20px 30px; */
  background-color: #fff;
  margin-top: 20px;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.usertTop {
  width: 750px;
  padding: 10px 32px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.Reviews {
  font-size: 30px;
  color: #333333;
}

.userAvator {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-right: 20px;
  background-color: #f2f2f2;
}

.userCenter {
  width: 750px;
  padding: 0 32px;
}

.userMsg {
  align-items: center;
  margin-bottom: 20px;
}

.userRight {
  padding: 10px;
  flex-direction: row;
  align-items: baseline;
}

.stroll {
  font-size: 24px;
  color: #ba8833;
  margin-right: 15px;
}
.rightBox {
  align-items: center;
  flex-direction: row;
  flex: 1;
}
.rightBox:active {
  background-color: #f2f2f2;
}
.sahreImg {
  width: 43px;
  height: 43px;
}
.strollIcon {
  font-size: 24px;
  color: #676665;
}

.userName {
  font-size: 22px;
  color: #666666;
  /* margin-bottom: 15px; */
}

.row_title {
  color: #1e1e1e;
  font-size: 26px;
  lines: 1;
  text-overflow: ellipsis;
  width: 686px;
  /* margin-right: 15px; */
}

.row_num {
  color: #323232;
  font-size: 26px;
}

.footer {
  width: 750px;
  padding: 0 20px;
  height: 100px;
  border-top-color: #edeaea;
  border-top-width: 1px;
  border-top-style: solid;
  background-color: #fff;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
}

.foot_icons {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
}

.iconsbox {
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.cardNumBox {
  position: absolute;
  background-color: rgba(186, 136, 51, 1);
  border-radius: 20px;
  padding: 0 10px;
  height: 33px;
  color: #fff;
  line-height: 33px;
  right: 50px;
  font-size: 20px;
  top: 8px;
  text-align: center;
}
.bright {
  border-right-color: #dad7d8;
  border-right-style: solid;
  border-right-width: 1px;
  flex: 2;
}

.boxright {
  flex: 3;
}

.boxtext,
.textIcon {
  width: 110px;
  text-align: center;
}
.boxtext {
  font-size: 16px;
}

.textIcon {
  margin-bottom: 5px;
  font-size: 32px;
}

.text {
  justify-content: center;
  width: 100%;
  font-size: 22upx;
  color: #666;
}

.btnBox {
  flex-direction: row;
  align-items: center;
}

.joinCart,
.buy {
  height: 70px;
  line-height: 68px;

  color: #fff;
  font-size: 30px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  min-width: 204px;
  text-align: center;
}

.joinCart {
  background-color: #fff;
  color: #bb8732;
  border-color: #bb8732;
}
.joinCart:active {
  background-color: #bb8732;
}

.buy {
  background-color: #303030;
  border-color: #303030;
  color: #fff;
  margin-right: 15px;
}
.buy:active {
  background-color: #000;
}

.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 780px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  position: fixed;
  left: 0;
  bottom: -780px;
  width: 750px;
  height: 780px;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 32px;
  z-index: 2;
}

.parmarAlert {
  position: fixed;
  left: 0;
  bottom: -780px;
  width: 750px;
  height: 780px;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 0;
}

.alertTop {
  width: 750px;
  padding: 0 32px;
  flex-direction: row;
  flex-wrap: nowrap;
}

.alertTops {
  width: 750px;
  position: relative;
  height: 100px;
  padding: 0 32px;
  align-items: center;
  justify-content: center;
  border-bottom-width: 1px;
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
}

.alertCloses {
  position: absolute;
  right: 32px;
  text-align: center;

  font-size: 30px;
  color: #666666;
}

.goodsImg {
  width: 228px;
  height: 228px;
  background-color: #f2f2f2;
}

.goodsTit {
  flex: 1;
  height: 228px;
  position: relative;
  padding-left: 20px;
}

.titleC {
  text-align: center;
  color: #1e1e1e;
  font-size: 30px;
}

.alertClose {
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  position: absolute;
  right: 0;
  font-size: 30px;
  color: #666666;
}

.rowPrice {
  flex-direction: row;
  align-items: center;
  margin-top: 15px;
}

.price {
  color: #ec414d;
  font-size: 36px;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin-right: 5px;
}

.intro {
  lines: 4;
  width: 426px;
  margin-top: 14px;
  color: #666666;
  font-size: 26px;
  line-height: 40px;
  text-overflow: ellipsis;
}

.alertScroll {
  flex: 1;
}

.styleBox {
  width: 686px;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}

.styleTitle {
  color: #1e1e1e;
  font-size: 30px;
}

.itemBox {
  flex-direction: row;
  margin-top: 16px;
}

.styleItem {
  border-width: 2px;
  border-style: solid;
  border-color: #e6eaed;
  background-color: #e6eaed;
  color: #333333;
  border-radius: 5px;
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  margin-right: 10px;
  font-size: 28px;
}

.styleActive {
  color: #ba8833;
  border-color: #ba8833;
  background-color: #ffffff;
}

.parmarList {
  flex-direction: row;
  width: 686px;
  height: 100px;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}

.parmarTit {
  width: 140px;
  font-size: 28px;
  color: #333333;
}

.parmarCon {
  font-size: 28px;
  color: #666666;
}

.price-number {
  width: 686px;
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}

.num-title {
  font-size: 30px;
  color: #1e1e1e;
}

.gnumber {
  flex-direction: row;
  align-items: center;
  height: 62px;
}

.numaction {
  width: 44px;
  height: 44px;
  /* background-color: #e7e7e7; */
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #888888;
}

.numinputbox {
  width: 100px;
  background-color: #fdfeff;
}

.numinput {
  width: 100px;
  text-align: center;
  font-size: 44px;
  height: 62px;
  line-height: 62px;
  color: #ec414d;
}

.numIcon {
  color: #1e1e1e;
  font-weight: 600;
}

.sureBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
</style>
